<template>
    <scroller class="container">
        <div>
            <head-bar height="80" middleText="跟进详情" :leftClick="returnPage"></head-bar>
        </div>
        <div class="follow-content">
            <div class="content-label">
                <text class="content-label-tag">*</text>
                <text class="content-label-t">跟进内容</text>
            </div>
            <text class="content">{{loadData.followContent}}</text>
            <waterfall class="image-area" :style="_autoHeightStyle" column-width="150"  column-count="auto" left-gap="20" column-gap="5">
                <cell v-for="(img,index) in imgs">
                    <div class="image-panel">
                        <image @click="openSlide(index)" class="image-i" :src="img.src" placeholder="root:img/default_yx.png"></image>
                    </div>
                </cell>
            </waterfall>
        </div>

        <div class="cell cell-top-border cell-bottom-border">
            <div class="cell-label">
                <text class="text-danger label-tag">*</text>
                <text class="text-notmal label-title">客户名称</text>
            </div>
            <div class="cell-content"><text class="text-minor">{{loadData.orgName}}</text></div>
        </div>
        <div class="cell cell-bottom-border">
            <div class="cell-label">
                <text class="text-danger label-tag">*</text>
                <text class="text-notmal label-title">跟进时间</text>
            </div>
            <div class="cell-content"><text class="text-minor">{{formatTime(loadData.followTime)}}</text></div>
        </div>
        <div class="cell cell-bottom-border">
            <div class="cell-label">
                <text class="text-danger label-tag">*</text>
                <text class="text-notmal label-title">跟进类型</text>
            </div>
            <div class="cell-content"><text class="text-minor">{{getFollowTypeName(loadData.followType)}}</text></div>
        </div>
        <div class="cell cell-bottom-border">
            <div class="cell-label">
                <text class="text-danger label-tag">*</text>
                <text class="text-notmal label-title">跟进方式</text>
            </div>
            <div class="cell-content"><text class="text-minor">{{getFollowwMethodName(loadData.followMethod)}}</text></div>
        </div>
        <div class="cell cell-bottom-border">
            <div class="cell-label">
                <text class="text-danger label-tag">*</text>
                <text class="text-notmal label-title">联系人</text>
            </div>
            <div class="cell-content"><text class="text-minor">{{loadData.contactName}}</text></div>
        </div>
        <div class="cell cell-bottom-border">
            <div class="cell-label">
                <text class="text-danger label-tag">*</text>
                <text class="text-notmal label-title">相关附件</text>
            </div>
            <div class="cell-content"><text class="text-minor">支持pc上相关附件查看</text></div>
        </div>

        <wxc-lightbox
                ref="wxc-lightbox"
                height="800"
                :show="showSlide"
                :image-list="imgs"
                :index="slideIndex"
                @wxcLightboxOverlayClicked="wxcLightboxOverlayClicked">
        </wxc-lightbox>

    </scroller>
</template>

<style>
    .container {
        flex-direction: column;
        background-color: #F6F6F6;
    }


    .content {
        width: 750px;
        height: 200px;
        padding-left: 20px;
        font-size:30px;
        padding-top: 15px;
    }

    .follow-content {
        background-color: white;
        padding-top: 36px;
    }

    .content-label {
        flex-direction: row;
        padding-left: 15px;
        width: 750px;
    }

    .content-label-tag {
        font-size: 32px;
        color: #ff5d54;
    }

    .content-label-t {
        font-size: 32px;
        color: #272727;
    }

    .image-area{
        justify-content: flex-start;
    }

    .image-panel{
        width:150px;
        height:150px;
        border-width: 1px;border-color: #d1d1d1;
        margin-bottom: 20px;
        margin-top:20px;
    }

    .image-i{
        width: 150px;
        height: 150px;
    }

    .cell{
        width: 750px;
        height:90px;
        padding-left:15px;
        padding-right:15px;
        flex-direction: row;
        background-color: white;
    }

    .cell-label{
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width:300px;
    }

    .cell-content{
        justify-content: center;
        align-items: flex-end;
        width: 420px;
    }

    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 1px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }



</style>



<!--全局通用样式-->
<style>

    .text-minor {
        font-size: 30px;
        color: #c4c4c4;
    }

    .text-notmal {
        font-size: 30px;
        color: #272727;
    }

    .text-important {
        font-size: 30px;
        color: #000000;
        font-weight: 800;
    }

    .text-success {
        font-size: 30px;
        color: #01a65a;
    }

    .text-danger{
        font-size: 30px;
        color: red;
    }


</style>

<script>
    import {WxcLightbox} from 'weex-ui'

    import headBar from '../components/headBar.vue'
    import stl from '../utils/stringUtils.js'
    import dtl from '../utils/dateUtils.js'

    const navigator = weex.requireModule('navigator')


    export default {
        components: {headBar,WxcLightbox},
        data: {
            imgs:[],
            showSlide:false,//是否显示幻灯片
            slideIndex:0,//是否显示幻灯片
            followTypeData: [
                //1000:客户，1100：普天宝，1200：商品，1300：订单，1400：财务，1500：投诉，1600：其他，1700：确认需求，1800：跟踪维护
                {name: '客户', value: '1000'},
                {name: '普天宝', value: '1100'},
                {name: '商品', value: '1200'},
                {name: '订单', value: '1300'},
                {name: '财务', value: '1400'},
                {name: '投诉', value: '1500'},
                {name: '其他', value: '1600'},
                {name: '确认需求', value: '1700'},
                {name: '跟踪维护', value: '1800'}
            ],
            followMethodData: [
                {name: '电话', value: '1000'},
                {name: 'QQ或微信', value: '1100'},
                {name: '现场拜访', value: '1200'}
            ],
            loadData:{},//跟进内容
            param:{}
        },
        computed:{
            _autoHeightStyle:function(){

                if(this.imgs.length == 0 ) {
                    return {height:0}
                }else{

                    var index = parseInt(this.imgs.length/4)

                    var remain =  this.imgs.length % 4

                    if(remain > 0 ) {
                        index += 1
                    }

                    return {height: index * 200}
                }

            }
        },
        methods: {
            //返回上个页面
            returnPage() {
                navigator.back()
            },
            //关闭幻灯片
            wxcLightboxOverlayClicked(){
                this.showSlide = false
            },
            //打开幻灯片
            openSlide(index){
                this.slideIndex = index
                this.showSlide = true
            },

            //获取跟进记录瀑布流高度
            autoFollowHeightStyle: function (urls) {
                var arr = this.imgList(urls)

                if (arr.length == 0) {
                    return {height: 0}
                } else {

                    var index = parseInt(arr.length / 4)

                    var remain = arr.length % 4

                    if (remain > 0) {
                        index += 1
                    }

                    return {height: index * 220}
                }

            },


            //跟进类型名称
            getFollowTypeName(code){
                for(let i in this.followTypeData){
                    var ele = this.followTypeData[i]
                    if(parseInt(ele.value) == code){
                        return ele.name
                    }
                }
            },

            formatTime: function (time) {
                if (!time) {
                    return ''
                }
                return dtl.formatDateTime(time)
            },

            //跟进方式名称
            getFollowwMethodName(code){
                for(let i in this.followMethodData){
                    var ele = this.followMethodData[i]
                    if(ele.value == code){
                        return ele.name
                    }
                }
            },

            //获取图片集合
            imgList(urls) {
                if (!urls) {
                    return []
                }

                var list = urls.split(';')

                var arr = new Array()
                for (let i = 0; i < list.length; i++) {
                    var url = list[i].split(',')[1]
                    arr.push({src:url})
                }

                this.imgs = arr

            },

            onLoad(){
                var param = navigator.param()

                this.loadData = param
                this.imgList(param.contentFiles)
                this.param = param
            }
        },
        created() {

        }
    }
</script>